import * as React from 'react';
import { Label } from 'office-ui-fabric-react/lib/Label';
// import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { PivotItem, Pivot, PivotLinkFormat, PivotLinkSize } from 'office-ui-fabric-react/lib/Pivot';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import WordTemplate from './WordTemplate'
import DocumentationAssistant from './DocumentationAssistant'
import Assistant from './Assistant'

import { Link } from 'react-router-dom'
import { getTheme, FontWeights, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';


import './styles.less';
import { Footer } from './Footer';
import { SearchType } from '../utils/enum';

// Themed styles for the example.
const theme = getTheme();
const styles = mergeStyleSets({
  link: {
    marginRight: 0,
    color: '#333',
    fontSize: '14px',
    backgroundColor: '#f4f4f4',
    borderTop: 'none'
  },
  linkIsSelected: [
    {
      color: theme.palette.themePrimary,
      fontSize: '14px',
      backgroundColor: '#FFFFFF',
      marginRight: 0
    }
  ],
});

interface IHomeState {
  activeTab: string
  searchType?: SearchType
  selectedValue?: string
}

export default class Home extends React.Component<any, IHomeState> {
  constructor(props) {
    super(props)
    this.state = {
      activeTab: 'tab1'
    }
  }

  public render(): JSX.Element {
    const that = window
    const { activeTab, searchType, selectedValue } = this.state
    return (
      <div className="home">
        <Pivot className="home-tabs" styles={styles} selectedKey={activeTab}
          onLinkClick={this.handleTabChange}
          linkFormat={PivotLinkFormat.links}
          linkSize={PivotLinkSize.large}
        >
          <PivotItem itemKey="tab1" linkText="文档模板" itemIcon="BulletedList">
            <WordTemplate />
          </PivotItem>
          <PivotItem itemKey="tab2" linkText="文献助手" itemIcon="AddNotes">
            <DocumentationAssistant />
          </PivotItem>
          <PivotItem itemKey="tab3" linkText="知识助手" itemIcon="Contact">
            <Assistant searchType={searchType} keyword={selectedValue} />
          </PivotItem>
        </Pivot>

        <Footer onSelectedDataChange={this.handleSelectedDataChange} />
        {
          // Office && <Link to="/detail">demo</Link>
        }
      </div>
    );
  }

  handleTabChange = (itemKey) => {
    console.log('选择tab', itemKey)
    this.setState({
      activeTab: itemKey
    })
  }

  handleSelectedDataChange = (type, value) => {
    console.log('选择 需要判断值跟类型', type, value)
    this.handleTabChange('tab3')
    this.setState({
      searchType: type,
      selectedValue: value
    })
  }

}
